<template>
  <div class="traveling-wrapper">
    <scroll-refresh ref="scrollRefresh" :top-load-method="refresh" :bottom-load-method="loadmore">
      <!-- <waterfall @preloaded="preloaded" :calHeight="true" :gap="2" :imgsArr="recommendList" :imgMaxHeight="250" wrapperName="dynamicWrapper" @clickItem="toDynamicDesc">
        <div slot="content" slot-scope="props" class="item-content">
          <p class="name">{{props.value.nickname}} <span class="time">{{props.value.publishTime}}</span></p>
          <p class="address" v-if="props.value.publishAddress">在  {{props.value.publishAddress}}</p>
        </div>
      </waterfall> -->
      <!-- <flow-img :imgsArr="recommendList" :gap="5"></flow-img> -->
      <div>
        <div class="group" v-for="group in recommendList" :key="group.date">
          <div class="title">
            <p class="name" v-if="group.name">{{group.name}}
              <span class="desc" v-if="group.desc">{{group.desc}}</span>
            </p>
            <p class="name" v-else>{{group.day}}
              <span class="text">{{group.month}}月</span>
            </p>
          </div>
          <flow-img :imgsArr="group.imgs" :gap="4" @clickItem="toDynamicDesc">
            <div slot="content" slot-scope="props" class="item-content">
              <p class="name">{{props.value.nickname}}
                <span class="time">{{props.value.publishTime}}</span>
              </p>
              <p class="address" v-if="props.value.publishAddress">在 {{props.value.publishAddress}}</p>
            </div>
          </flow-img>
        </div>
      </div>
    </scroll-refresh>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { isIphoneX } from '@/assets/js/brower'

import ScrollRefresh from '@/components/scroll-refresh/scroll-refresh'
// import Waterfall from '@/components/waterfall/waterfall'
import FlowImg from '@/components/flow-img/flow-img'
import { Popup, TransferDom } from 'vux'

export default {
  name: 'Traveling',
  data() {
    return {
      topicList: [],
      recommendList: []
    }
  },
  directives: {
    TransferDom
  },
  components: {
    FlowImg,
    Popup,
    ScrollRefresh
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }

    this.pageNum = 1
    // this._getHotTag()
    this._getRecommendDynamic()
    this.selectedArea = this.$store.getters.currentArea
    this.areaList = this.$store.getters.areaList
  },
  methods: {
    _getHotTag() {
      const _self = this
      axios.get(
        this,
        '/v1/tag',
        {
          hotTag: 1,
          pageSize: 5
        },
        data => {
          _self.topicList = data
          _self.$nextTick(() => {
            _self.$refs.topicList.style.width =
              (120 + 6) * _self.topicList.length + 'px'
          })
        },
        null,
        false
      )
    },
    _getRecommendDynamic() {
      const userId = localUser.get('id')
      const _self = this
      axios.get(
        _self,
        '/v1/dynamic',
        {
          pageSize: 10,
          pageNum: _self.pageNum,
          curUserId: userId
        },
        data => {
          let tmp
          if (_self.pageNum <= 1) {
            tmp = []
          } else {
            tmp = this.recommendList.concat([])
          }
          data.forEach(item => {
            item.src = item.atlas ? item.atlas.split(';')[0] + '-w350' : ''
            item.publishDate = item.publishTime.split(' ')[0]
            item.publishTime = _self
              .moment(item.publishTime)
              .from(_self.moment())
            const findIndex = tmp.findIndex(o => o.date === item.publishDate)
            if (findIndex > -1) {
              tmp[findIndex].imgs.push(item)
            } else {
              const dayDiff = _self.moment().diff(item.publishDate, 'days')
              let name, desc
              if (dayDiff === 0) {
                name = '今天'
                desc = '最美黔东南，等你来发现'
              } else if (dayDiff === 1) {
                name = '昨天'
                desc = '沿途的风景，以及看风景的心情'
              }
              tmp.push({
                date: item.publishDate,
                month: item.publishDate.split('-')[1],
                day: item.publishDate.split('-')[2],
                name: name,
                desc: desc,
                imgs: [item]
              })
            }
          })
          _self.recommendList = tmp
        },
        null,
        false
      )
    },
    refresh(done) {
      this.pageNum = 1
      this._getRecommendDynamic()
      setTimeout(done, 500)
    },
    loadmore(done) {
      this.pageNum++
      this._getRecommendDynamic()
      setTimeout(done, 200)
    },
    updateMessage(dynamicId, value) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (value) {
        // 禁止取消
        this.$vux.toast.text('你已经点赞过了~', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      let params = {
        userId: userId,
        targetId: dynamicId,
        type: 1,
        starType: value ? 0 : 1
      }
      const _self = this
      this.sendRequest = true
      axios.post(
        this,
        '/v1/messageRecord',
        params,
        data => {
          _self.sendRequest = false
          const index = _self.recommendList.findIndex(o => o.id === dynamicId)
          if (value) {
            _self.recommendList[index].star = 0
            _self.recommendList[index].starSum--
          } else {
            _self.recommendList[index].star = 1
            _self.recommendList[index].starSum++
          }
        },
        () => {
          _self.sendRequest = false
        },
        false
      )
    },
    toTag(tagId) {
      this.$router.push(`/meiTu/tagDynamic/${tagId}`)
    },
    toDynamicDesc(item) {
      this.$router.push(`/meiTu/dynamicDesc/${item.id}`)
    },
    preloaded() {}
  },
  watch: {
    $route(to, from) {
      if (to.name === 'MeiTu' && from.name === 'PublishDynamic') {
        this._getRecommendDynamic()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.traveling-wrapper
  height 100%
  overflow-y scroll
  -webkit-overflow-scrolling touch
  background $color-background
  position relative
  .group
    .title
      height 45px
      line-height 1
      display flex
      padding 0 12px
      line-height 45px
      margin-top 5px
    .desc
      font-size 13px !important
      color #999
      font-weight normal
      display inline-block
      margin-left 16px !important
    .name
      font-size 28px
      font-weight bold
      .text
        display inline-block
        font-size 16px
        margin-left 5px
  .item-content
    line-height 1
    padding 8px
    text-align right
    .name
      color #fff
      font-size 14px
      font-weight normal
    .address
      color rgba(255, 255, 255, 0.85)
      font-size 12px
      margin-top 8px
      font-weight normal
    .time
      margin-left 8px
      color rgba(255, 255, 255, 0.85)
      font-size 12px
      font-weight normal
    p
      no-wrap()
</style>

<style lang="stylus">
.traveling-wrapper
  .img-inner-box
    display flex
    align-items flex-end
  .img-content
    width 100%

</style>
